<!--
 * @Author: Bennty
 * @Date: 2024-08-20 10:58:40
 * @LastEditors: Please set LastEditors
 * @LastEditTime: 2024-09-27 16:19:20
 * @Description: 请填写简介
-->
<template>
    <div ref="newlyTagRef" class="process-continer" v-show="visible">
        <el-tag  class="new-process" type="success" size="large" checked closable @close="handleCloseNewTag" >{{ tagName }}</el-tag>
        <div class="processes-list" v-if="displayProcessList">
            <span class="process" v-for="item in process" :key="item.id" @click="handleClickNewTag(item)">{{ item.workName }}</span>
        </div>
    </div>
</template>

<script setup lang="ts">
const { visible,process } = defineProps(['visible','process']);
const emits = defineEmits(['close','transmitProcess']);
const displayProcessList = ref(false);
const tagName = ref<string>();
const newlyTagRef = ref<HTMLElement | null>(null);

const handleClickNewTag = (item: any)=>{
    tagName.value = item.workName;
    const emitsData = {
        workProcedureId: item.id,
        workName: item.workName
    };
    emits('transmitProcess',emitsData);
    handleCloseNewTag();
};

const handleCloseNewTag = ()=>{
    emits('close');
    tagName.value = '';
};

/** 点击页面其他地方时，选择工序列表关闭 */
const handleClickOutside = (event: any)=>{
    if(newlyTagRef.value && ! newlyTagRef.value?.contains(event.target)){
        displayProcessList.value = false;
    };
};


onMounted(()=>{
    newlyTagRef.value?.addEventListener('click',(event)=>{
        event.stopPropagation();
        displayProcessList.value = !displayProcessList.value;
    });
    document.addEventListener('click',handleClickOutside);
});

onBeforeUnmount(() => {
    removeEventListener('click',(event: any)=>{
        event.stopPropagation();
        displayProcessList.value = !displayProcessList.value;
    });
    document.removeEventListener('click',handleClickOutside);
});

</script>

<style lang="scss" scoped>
.process-continer{
    position: relative;
    .new-process{
        cursor: pointer;
        width: 80px;
    }
    .processes-list{
        position: absolute;
        width: 60px;
        top: 35px;
        z-index: 999;
        overflow-y: scroll;
        border: solid 1px gary;
        background-color: #fff;
    }
    .process{
        display: block;
        cursor: pointer;
        font-size: 15px;
        width: 100%;
        margin-bottom: 5px;
        &:hover{
            background-color: blue;
            color: white;
        }
    }
}

</style>